<template>
  <el-dialog title="订单详情" :visible.sync="detailDialog" class="detail" :close-on-click-modal="false">

    <el-form ref="dataForm" label-position="left" style=" padding-left:50px;padding-right:50px;padding-top:22px;" :inline="true">
      <el-form-item label="订单号">
        <span>{{ detailForm.orderNo }}</span>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-tag>{{ detailForm.state | typeFilter }}</el-tag>
      </el-form-item>
      <br>
      <el-form-item label="总计金额">
        <span>¥{{ detailForm.totalPrice.toFixed(2) }}</span>
      </el-form-item>
      <el-form-item label="实付金额">
        <span>¥{{ detailForm.payMoney.toFixed(2) }}</span>
      </el-form-item>
      <el-form-item label="优惠金额" with="300px">
        <span>{{ `会员${detailForm.vipDiscountTotal.toFixed(2)} 优惠券${detailForm.discountTotal.toFixed(2)}` }}</span>
      </el-form-item>
      <br>
      <el-form-item label="订单备注">
        <span>{{ detailForm.note }}</span>
      </el-form-item>
      <el-form-item label="订单时间">
        <span>{{ detailForm.createTime }}</span>
      </el-form-item>
    </el-form>

    <el-form ref="dataForm" label-position="left" style=" padding-left:50px;padding-right:50px;padding-top:22px;" :inline="true">

      <el-form-item label="产品规格" style="width:100%">

        <el-table
          v-loading="waresLodding"
          :data="detailForm.wares"
          border
          fit
          style="width: 100%;"
        >
          <el-table-column label="商品">
            <template slot-scope="{row}">
              <span>{{ row.warename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="{row}">
              <span>{{ row.modelname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="供货商">
            <template slot-scope="{row}">
              <span>{{ row.supplierName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="{row}">
              <span>¥{{ row.unitPrice.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span>{{ row.number }}</span>
            </template>
          </el-table-column>
        </el-table>

      </el-form-item>
    </el-form>

    <el-form ref="dataForm" label-position="left" style=" padding-left:50px;padding-right:50px;padding-top:22px;" :inline="true">
      <el-form-item label="物流公司">
        <span>{{ detailForm.courier }}</span>
      </el-form-item>
      <el-form-item label="物流单号">
        <span>{{ detailForm.courierNo }}</span>
      </el-form-item>
    </el-form>

    <el-form ref="dataForm" label-position="left" style=" padding-left:50px;padding-right:50px;padding-top:22px;" :inline="true">

      <el-form-item label="昵称">
        <span>{{ detailForm.nickName }}</span>
      </el-form-item>
      <el-form-item label="真实姓名">
        <span>{{ detailForm.name }}</span>
      </el-form-item>
      <el-form-item label="手机号">
        <span>{{ detailForm.phone }}</span>
      </el-form-item>
      <el-form-item label="地址">
        <span>{{ `${detailForm.city} ${detailForm.address}` }}</span>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="detailDialog = false">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderInfo } from '@/api/orders'

// -3.已退款 -2.已过期 -1.已取消 0.未付款 1.待发货 2.待收货 3.已收货 4.售后
const stateOptions = [
  { index: undefined, value: '全部' },
  { index: -3, value: '已退款' },
  { index: -2, value: '已过期' },
  { index: -1, value: '已取消' },
  { index: 0, value: '未付款' },
  { index: 1, value: '待发货' },
  { index: 2, value: '待收货' },
  { index: 3, value: '已收货' },
  { index: 4, value: '售后' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = stateOptions.reduce((acc, cur) => {
  acc[cur.index] = cur.value
  return acc
}, {})
export default {
  filters: {
    typeFilter(index) {
      return calendarTypeKeyValue[index]
    }
  },
  props: {
    value: {
      type: Boolean,
      required: false,
      default() {
        return false
      }
    },
    gid: {
      type: String,
      required: false,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      detailForm: {
        orderNo: '',
        state: '',
        totalPrice: '',
        payMoney: '',
        savingTotal: '',
        vipDiscountTotal: '',
        discountTotal: '',
        note: '',
        courier: '',
        courierNo: '',
        nickName: '',
        phone: '',
        name: '',
        city: '',
        address: '',
        wares: []
      },
      waresLodding: true
    }
  },
  computed: {
    detailDialog: {
      get() {
        return this.value
      },
      set(value) {
        console.log('改变之后的value', value)
        this.$emit('input', value)
      }
    }
  },
  watch: {
    detailDialog(newValue) {
      if (newValue) {
        this.getOrderInfo(this.gid)
      }
    }
  },
  methods: {
    getOrderInfo(gid) {
      this.waresLodding = true
      getOrderInfo({ gid: gid }).then(res => {
        console.log(res)
        this.detailForm.orderNo = res.result.orderNo || ''
        this.detailForm.state = res.result.state
        this.detailForm.totalPrice = res.result.totalPrice
        this.detailForm.payMoney = res.result.payMoney
        this.detailForm.savingTotal = res.result.savingTotal
        this.detailForm.vipDiscountTotal = res.result.vipDiscountTotal
        this.detailForm.discountTotal = res.result.discountTotal
        this.detailForm.note = res.result.note
        this.detailForm.courier = res.result.courier
        this.detailForm.courierNo = res.result.courierNo || ''
        this.detailForm.nickName = res.result.nickName
        this.detailForm.phone = res.result.phone
        this.detailForm.name = res.result.name
        this.detailForm.city = res.result.city
        this.detailForm.address = res.result.address
        this.detailForm.wares = res.result.wares
        this.waresLodding = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/mixin.scss';
    .el-dialog__body{
        background-color: $bg2;
        padding: 20px 20px;
        .el-form{
            background-color: #fff;
            margin-bottom: 5px;
            border-radius: 4px;
        }
    }
</style>
